<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{width:`${isCollapse?65:240}px`, transition: '0.4s'}">
        <el-menu 
          :default-active="$route.path"
          background-color="#345"
          text-color="#bbb"
          :style="{height: '100vh'}"
          :collapse="false"
          class="el-menu-vertical-demo"
          router 
          >
          <el-menu-item>
            <img width="30px" src="../assets/logo.svg" alt="">
            <template slot="title">
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;百慕大影城后台管理</span>
            </template>
          </el-menu-item>
          <template v-for="item in menuData">
                  <el-menu-item :index="item.path" v-if="!item.children" :key="item.text">
                  <i :class="item.icon"></i>
                  <template slot="title">
                    {{ item.text }}
                  </template>
                </el-menu-item>
                <el-submenu v-else :index="item.path" :key="item.path">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.text }}</span>
                  </template>
                  <el-menu-item :index="items.path" v-for="items in item.children" :key="items.text">
                    <i :class="items.icon"></i>
                    <span slot="title">{{ items.text }}</span>
                  </el-menu-item>
                </el-submenu>
          </template>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>
            <el-breadcrumb separator-class="el-icon-arrow-right" separator="/" style="flex: 1;margin-left: 20px;">
              <el-breadcrumb-item v-for="nativ in $route.meta.breadcrumb"  :key="nativ.text? nativ.text:nativ" :to="nativ.to? nativ.to:''">{{nativ.text? nativ.text:nativ}}</el-breadcrumb-item>
            </el-breadcrumb>
          <span>未登录</span>
        </el-header>

        <el-main>
            <!-- 二级路由占位符 -->
            <el-divider></el-divider>
           <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      menuData:[
        {
          text:'首页',
          path:'/home/index',
          icon:"el-icon-message",
        },
        {
          text:'演员管理',
          path:'1',
          icon:"el-icon-location",
          children:[
            {
              text:"演员列表",
              path:"/home/actor-list",
              icon:'el-icon-notebook-2'
            },
            {
              text:"新增演员",
              path:"/home/actor-add",
              icon:'el-icon-plus',
            },
          ]
        },
        {
          text:'导演管理',
          path:'2',
          icon:"el-icon-location",
          children:[
            {
              text:"导演列表",
              path:"/home/director-list",
              icon:'el-icon-notebook-2'
            },
            {
              text:"新增导演",
              path:"/home/director-add",
              icon:'el-icon-plus',
            },
          ]
        },
        {
          text:'电影管理',
          path:'3',
          icon:"el-icon-location",
          children:[
            {
              text:"电影列表",
              path:"/home/movie-list",
              icon:'el-icon-notebook-2'
            },
            {
              text:"新增电影",
              path:"/home/movie-add",
              icon:'el-icon-plus',
            },
          ]
        },
        {
          text:'电影院管理',
          path:'4',
          icon:"el-icon-location",
          children:[
            {
              text:"电影院列表",
              path:"/home/cinema-list",
              icon:'el-icon-notebook-2'
            },
            {
              text:"新增电影院",
              path:"/home/cinema-add",
              icon:'el-icon-plus',
            },
          ]
        },
      ]
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
</style>
